<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio Player with Progress Bar</title>
  <style>
    #progress-bar {
      width: 100%;
      height: 10px;
      background: #ddd;
      border-radius: 5px;
      margin: 10px 0;
    }
    #progress-bar input {
      width: 100%;
      height: 10px;
      -webkit-appearance: none;
      background: #f00;
      border-radius: 5px;
    }
  </style>
</head>
<body>
<button id="play">Play</button>
<button id="pause">Pause</button>
<input type="range" id="progress-bar" value="0" min="0" max="100" step="1">

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
<script>
  var sound = new Howl({
    src: ['path/to/your/audiofile.mp3'],
    onplay: function() {
      updateProgressBar();
    },
    onend: function() {
      document.getElementById('progress-bar').value = 0;
    }
  });

  document.getElementById('play').addEventListener('click', function() {
    sound.play();
  });

  document.getElementById('pause').addEventListener('click', function() {
    sound.pause();
  });

  var progressBar = document.getElementById('progress-bar');
  progressBar.addEventListener('input', function() {
    var value = progressBar.value;
    sound.seek(sound.duration() * (value / 100));
  });

  function updateProgressBar() {
    if (sound.playing()) {
      var duration = sound.duration();
      var seek = sound.seek();
      var progress = (seek / duration) * 100;
      progressBar.value = progress;

      setTimeout(updateProgressBar, 1000); // Update progress bar every second
    }
  }
</script>
</body>
</html>
